<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>

    <title>Login Form Fragment</title>
    <link href="../../static/css/cas.css" rel="stylesheet" th:remove="tag"/>
</head>

<body>
<main role="main" class="container mt-3 mb-3">
    <!-- Login form template begins here -->
    <div th:fragment="loginform" class="d-flex flex-column justify-content-between m-auto">
        <div th:if="${delegatedAuthenticationProviderPrimary == null}">
            <div class="service-ui" th:replace="fragments/serviceui :: serviceUI">
                <a href="fragments/serviceui.html">service ui fragment</a>
            </div>
        </div>
        <div class="form-wrapper">
            <form method="post" id="fm1" th:object="${credential}" action="login">


                <div th:if="${existingSingleSignOnSessionAvailable}">
                    <i class="mdi mdi-alert-decagram"></i>&nbsp;
                    <span class="mdc-button__label"
                          th:utext="#{screen.welcome.forcedsso(${existingSingleSignOnSessionPrincipal.id},${registeredService.name})}"/>
                </div>
                <h3 th:unless="${existingSingleSignOnSessionAvailable}" class="text-center">
                    <i class="mdi mdi-security"></i>
                    <span th:utext="#{screen.welcome.instructions}">Enter your Username and Password:</span>
                </h3>

                <div id="codeerror" class="banner banner-danger banner-dismissible" style="display: none">
                    <p></p>
                </div>

                <div class="banner banner-danger banner-dismissible" th:if="${#fields.hasErrors('*')}">
                    <p th:each="err : ${#fields.errors('*')}" th:utext="${err + ' '}">Example error</p>
                    <!--<a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>-->
                </div>

                <section class="cas-field my-2=3">
                        <span th:if="${availableAuthenticationHandlerNames != null}">
                            <span th:if="${availableAuthenticationHandlerNames.size() > 1}">
                                <label for="source" th:utext="#{screen.welcome.label.source}">Source</label>
                                <div>
                                    <select class="form-control required"
                                            id="source"
                                            name="source"
                                            th:field="*{source}">
                                        <option th:each="handler : ${availableAuthenticationHandlerNames}"
                                                th:value="${handler}" th:text="${handler}">Source</option>
                                    </select>
                                </div>
                            </span>
                            <span th:if="${availableAuthenticationHandlerNames.size() == 1}">
                                <input type="hidden"
                                       id="source"
                                       name="source"
                                       th:value="${availableAuthenticationHandlerNames.get(0)}"/>
                            </span>
                        </span>
                </section>

                <section class="cas-field my-3">
                    <div class="mdc-text-field  d-flex">
                        <input class="mdc-text-field__input"
                               id="username"
                               size="25"
                               type="text"
                               tabindex="1"
                               th:readonly="!${@casThymeleafLoginFormDirector.isLoginFormUsernameInputVisible(#vars)}"
                               th:disabled="${@casThymeleafLoginFormDirector.isLoginFormUsernameInputDisabled(#vars)}"
                               th:field="*{username}"
                               th:accesskey="#{screen.welcome.label.netid.accesskey}"
                               th:value="${@casThymeleafLoginFormDirector.getLoginFormUsername(#vars)}"
                               autocomplete="off"/>
                        <label for="username" class="mdc-floating-label" th:utext="#{screen.welcome.label.netid}">Username</label>
                    </div>
                </section>

                <section class="cas-field my-3 mdc-input-group">
                    <div class="mdc-input-group-field mdc-input-group-field-append">
                        <div class="mdc-text-field  mdc-text-field--with-trailing-icon d-flex caps-check">
                            <input class="mdc-text-field__input pwd" type="password" id="password" size="25"
                                   th:accesskey="#{screen.welcome.label.password.accesskey}" th:field="*{password}"
                                   autocomplete="off" tabindex="2"/>
                            <label for="username" class="mdc-floating-label"
                                   th:utext="#{screen.welcome.label.password}">Password</label>
                        </div>
                        <div class="mdc-text-field-helper-line caps-warn">
                            <p
                                    class="mdc-text-field-helper-text mdc-text-field-helper-text--persistent mdc-text-field-helper-text--validation-msg text-danger">
                                <span th:utext="#{screen.capslock.on}"/>
                            </p>
                        </div>
                    </div>
                    <button class="reveal-password mdc-button mdc-button--raised mdc-input-group-append mdc-icon-button"
                            type="button">
                        <i class="mdi mdi-eye reveal-password-icon"></i>
                        <span class="sr-only">Toggle Password</span>
                    </button>
                </section>

                <section class="cas-field my-3">
                    <div th:each="entry: ${customLoginFormFields}">
                        <div>
                            <span th:text="#{${entry.value.messageBundleKey}}">Label</span>
                            <input class="form-control required" type="text" name="data"
                                   th:field="*{customFields[__${entry.key}__]}">
                            <p/>
                        </div>
                    </div>
                </section>

                <section class="cas-field"
                         th:if="${passwordManagementEnabled != null && passwordManagementEnabled && param.doChangePassword != null}">
                    <p>
                        <input type="checkbox" name="doChangePassword" id="doChangePassword"
                               value="true" th:checked="${param.doChangePassword != null}"/>
                        <label for="doChangePassword" th:text="#{screen.button.changePassword}">Change Password</label>
                    </p>
                </section>


                <section class="cas-field my-3">
                    <div class="mdc-text-field  d-flex">
                        <input class="mdc-text-field__input"
                               id="checkcode"
                               size="15"
                               type="text"
                               tabindex="3"
                               th:accesskey="#{screen.welcome.label.checkcode}"

                               autocomplete="off"/>
                        <label for="checkcode" class="mdc-floating-label" th:utext="#{screen.welcome.label.checkcode}">验证码</label>

                        <a href="javascript:void(0);" onclick="getNewCode()" th:title="#{login.image.alt}"
                           class="form-control-checkcode-image">
                            <img id="newcode"
                                 th:src="@{/checkcode/bimage}">
                        </a>
                    </div>
                </section>


                <section class="cas-field" th:if="${rememberMeAuthenticationEnabled}">
                    <p>
                        <input type="checkbox" name="rememberMe" id="rememberMe" value="true"/> &nbsp;
                        <label for="rememberMe" th:text="#{screen.rememberme.checkbox.title}">Remember Me</label>

                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <span class="fa fa-globe"></span>
                        <span th:utext="#{screen.welcome.label.language}">语言:</span>
                        &nbsp;&nbsp;
                        <a th:utext="#{screen.welcome.label.language.zh}"
                           th:href="@{login(locale=zh_CN)}">中文</a>
                        &nbsp;&nbsp;
                        <a th:utext="#{screen.welcome.label.language.en}" th:href="@{login(locale=en)}">英文</a>
                    </p>
                </section>

                <section class="cas-field">

                    <div th:replace="fragments/recaptcha :: recaptchaToken"/>

                    <input type="hidden" name="execution" th:value="${flowExecutionKey}"/>
                    <input type="hidden" name="_eventId" value="submit"/>
                    <input type="hidden" name="geolocation"/>

                    <p th:if="${#request.getMethod().equalsIgnoreCase('POST')}">
                            <span th:each="entry : ${httpRequestInitialPostParameters}" th:remove="tag">
                                <span th:each="entryValue : ${entry.value}" th:remove="tag">
                                    <input type="hidden" th:name="${entry.key}" th:value="${entryValue}"/>
                                </span>
                            </span>
                    </p>
                </section>

                <div th:replace="fragments/submitbutton :: submitButton (messageKey='screen.welcome.button.login')"/>

            </form>

            <hr class="my-4"/>

            <div th:replace="fragments/pmlinks :: pmlinks"/>

            <script type="text/javascript" th:inline="javascript">

                /*<![CDATA[*/
                ctxPath = /*[[@{/}]]*/ '';
                /*]]>*/
                // alert(ctxPath);

                /*<![CDATA[*/
                var i = /*[[@{#{screen.welcome.button.loginwip}}]]*/
                var j = /*[[@{#{screen.welcome.button.login}}]]*/
                    /*]]>*/
                    $(window).on('pageshow', function () {
                        $(':submit').prop('disabled', false);
                        $(':submit').attr('value', j);
                    });
                $(document).ready(function () {
                    $("#fm1").submit(function () {
                        if (validateCode()) {
                            $(":submit").attr("disabled", true);
                            $(":submit").attr("value", i);
                            return true;
                        }
                        $(":submit").attr("disabled", false);
                        $(':submit').attr('value', j);
                        return false;
                    });
                });

                // 验证码处理逻辑
                function validateCode() {
                    // ajax调用验证码是否正确
                    var result = false;
                    $.ajax({
                        type: "post",  //使用提交的方法 post、get
                        url: ctxPath + "checkcode/check",   //提交的地址
                        data: {code: $("#checkcode").val()},  //数据
                        async: false,   //配置是否
                        dataType: "json",//返回数据类型的格式
                        success: function (data) {  //回调操作
                            console.log(data);
                            var error = data.error;
                            result = setCodeInfo(error, data.msg);
                        }
                    });
                    return result;
                }

                //设定验证码的错误提示消息
                function setCodeInfo(error, msg) {
                    if (error) {
                        $("#codeerror").html("<p>" + msg + "</p>");
                        $("#codeerror").show();
                        $("#checkcode").focus();
                        return false;
                    }
                    return true;
                }

                //刷新验证码
                function getNewCode() {
                    $("#newcode").attr("src", ctxPath + "checkcode/bimage?tem=" + Math.floor(Math.random() * 100)).fadeIn();
                }
            </script>


        </div>
        <div th:replace="fragments/loginsidebar :: loginsidebar"/>
    </div>
    </div>
</main>
</body>
</html>
